<template>
  <div>
    <el-table
      :data="
        registrationList.slice(
          (currentPage - 1) * pagesize,
          currentPage * pagesize
        )
      "
      style="width: 100%"
      @cell-click="ifUpdateState"
      v-loading="loading"
    >
      <el-table-column prop="contact" label="联系人" align="center" width="100">
      </el-table-column>
      <el-table-column prop="examDescription" label="考试内容" align="center">
      </el-table-column>
      <el-table-column
        prop="number"
        label="可报名总人数"
        sortable
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="last"
        label="剩余人数"
        sortable
        align="center"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="term"
        label="学期"
        :formatter="termFormatter"
        sortable
        align="center"
      >
      </el-table-column>
      <el-table-column label="状态" width="150" align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.ifUpdate">
            <el-tag :type="scope.row.type">{{ scope.row.stateUTF }}</el-tag>
          </template>
          <template v-else>
            <el-select v-model="state" placeholder="请选择">
              <el-option
                v-for="item in stateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            @click="updateState(scope.row)"
            size="small"
            v-if="!scope.row.ifUpdate"
            >修改</el-button
          >
          <el-button
            type="danger"
            @click="deleteRegistrationRelease(scope.row)"
            size="small"
            >删除</el-button
          >
          <el-button
            type="info"
            @click="getRegistrationUserList(scope.row)"
            size="small"
            >报名进度</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      background
      align="center"
      layout="total, prev, pager, next, jumper"
      :total="pageTotal"
    >
    </el-pagination>

    <el-dialog
      title="报名表"
      height="500"
      :visible.sync="userListDialog"
      v-loading="examLoading"
    >
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="任课教师">
          <el-input v-model="teacher" placeholder="任课教师"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="arrangeSeat"
            >一键添加考场位置</el-button
          >
        </el-form-item>
      </el-form>
      <el-table :data="allReg">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="realName" label="学生姓名"></el-table-column>
        <el-table-column prop="major" label="学生专业"></el-table-column>
        <el-table-column prop="className" label="学生班级"></el-table-column>
        <el-table-column prop="stuNo" label="学生学号"></el-table-column>
        <el-table-column prop="email" label="联系方式"></el-table-column>
        <el-table-column prop="location" label="考场座位"></el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click="deleteUserReg(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { mapState, mapActions } from "vuex";
export default {
  inject: ["reload"],
  name: "getRegistration",
  data() {
    return {
      loading: false,
      //报名表
      registrationList: [],
      //考试信息表
      examList: [],
      //初始页
      currentPage: 1,
      //每页的数据
      pagesize: 10,
      //数组总数
      pageTotal: 0,

      //状态表
      stateOptions: [
        {
          value: "START",
          label: "报名开始",
        },
        {
          value: "FINISH",
          label: "报名结束",
        },
        {
          value: "CANCEL",
          label: "报名取消",
        },
        {
          value: "PREPARE",
          label: "报名准备",
        },
      ],
      state: "",

      //全用户表
      allUser: [],
      //全报名表
      allReg: [],
      //考场表
      locationList: [],
      //显示用户报名表dialog
      userListDialog: false,
      //报名进度dialog
      examLoading: false,
      teacher: "",
      examDetailId: "",
      examEntryId: "",
    };
  },
  computed: {
    ...mapState({
      print: (state) => state.print.all,
      userId: (state) => state.userId.all,
    }),
  },
  mounted: function () {
    this.getRegistrationList();
  },
  methods: {
    getRegistrationList: function () {
      var that = this;
      this.loading = true;
      axios
        .all([
          //报名表
          axios({
            headers: { Authorization: this.print.Authorization },
            method: "get",
            url: "/api/examEntry/all?pageNum&pageSize=1000000",
          }),
          //考试信息表
          axios({
            headers: { Authorization: this.print.Authorization },
            method: "get",
            url: "/api/examDetail",
          }),
        ])
        .then(
          axios.spread(function (regResponse, examResponse) {
            that.registrationList = regResponse.data.data;
            that.pageTotal = regResponse.data.data.length;
            that.examList = examResponse.data.data;
            that.getListToge();
          })
        )
        .catch((err) => {
          that.$message.error("获取失败");
        });
    },

    getListToge: function () {
      this.registrationList.forEach((item) => {
        for (var i = 0; i < this.examList.length; i++) {
          if (this.examList[i].examDetailId == item.examDetailId) {
            this.$set(
              item,
              "examDescription",
              this.examList[i].examDescription
            );

            if (item.state == "START") {
              this.$set(item, "stateUTF", "可报名");
              this.$set(item, "type", "success");
            } else if (item.state == "FINISH") {
              this.$set(item, "stateUTF", "报名结束");
              this.$set(item, "type", "danger");
            } else if (item.state == "CANCEL") {
              this.$set(item, "stateUTF", "报名取消");
              this.$set(item, "type", "info");
            } else if (item.state == "PREPARE") {
              this.$set(item, "stateUTF", "准备中");
              this.$set(item, "type", "primary");
            }
            //是否可编辑单元格
            this.$set(item, "ifUpdate", true);
          }
        }

        //获取报名考试剩余人数
        var that = this;
        if (item.number == 0) {
          this.$set(item, "last", 0);
        } else if (item.number <= 1000) {
          axios({
            headers: { Authorization: this.print.Authorization },
            method: "get",
            url: "/api/userExamEntry/remain?examEntryId=" + item.examEntryId,
          }).then(
            function (reponse) {
              that.$set(item, "last", reponse.data.data);
            },
            function (err) {
              that.$set(item, "last", "不可报名状态");
            }
          );
        } else {
          axios({
            headers: { Authorization: this.print.Authorization },
            method: "get",
            url:
              "/api/userExamEntry/cache/remain?examEntryId=" + item.examEntryId,
          }).then(
            function (reponse) {
              that.$set(item, "last", reponse.data.data);
            },
            function (err) {
              that.$set(item, "last", item.number);
            }
          );
        }

        //判断剩余人数是否为0，如果为0提示
        if (item.state == "START" && item.last == 0) {
          this.$notify({
            title: "提示",
            message:
              item.contact +
              "发布的" +
              item.term +
              item.examDescription +
              "报名人数已满",
            duration: 0,
          });
        }
      });
      this.loading = false;
    },

    //表格数据转换
    termFormatter(row, column) {
      let term = row.term;
      if (term.indexOf("SH") > 0) {
        return term.replace("SH", "上学期");
      } else {
        return term.replace("FH", "下学期");
      }
    },

    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },

    ifUpdateState: function (row, column, cell, event) {
      if (row.ifUpdate == true) {
        if (row.state == "FINISH") {
          this.$message({
            message: "报名已结束，无法更改",
            type: "info",
          });
        } else {
          //防止点到按钮
          if (column.fixed != "right") {
            this.$message({
              message: "确认改变报名状态",
              type: "info",
            });
            row.ifUpdate = false;
            this.state = row.state;
          } else {
            this.$message({
              message: "只能改变报名状态",
              type: "warning",
            });
          }
        }
      }
    },

    updateState: function (row) {
      var that = this;
      row.ifUpdate = true;
      if (row.state == this.state) {
        that.$message({
          message: "未进行更改，取消编辑",
          type: "info",
        });
      } else {
        axios({
          headers: { Authorization: this.print.Authorization },
          method: "put",
          url: "/api/examEntry",
          params: {
            examEntryId: row.examEntryId,
            examDetailId: row.examDetailId,
            term: row.term,
            contact: row.contact,
            state: this.state,
          },
        }).then(
          function (reponse) {
            that.$message({
              message: "更改成功",
              type: "success",
            });
            that.reload();
          },
          function (err) {
            that.$message.error("更改失败");
          }
        );
      }
    },

    deleteRegistrationRelease: function (row) {
      var that = this;
      axios({
        headers: { Authorization: this.print.Authorization },
        method: "delete",
        url: "/api/examEntry?examEntryId=" + row.examEntryId,
      }).then(
        function (reponse) {
          that.$message({
            message: "删除成功",
            type: "success",
          });
          that.reload();
        },
        function (err) {
          that.$message.error("删除失败");
        }
      );
    },

    getRegistrationUserList: function (row) {
      var that = this;
      this.userList = [];
      this.userListDialog = true;
      this.examLoading = true;
      this.examDetailId = row.examDetailId;
      this.examEntryId = row.examEntryId;
      if (row.number < 1000) {
        //mySQL获得用户信息
        axios
          .all([
            axios({
              headers: {
                Authorization: this.print.Authorization,
              },
              method: "get",
              url: "/api/users?pageNum&pageSize=1000000",
            }),
            axios({
              headers: { Authorization: this.print.Authorization },
              method: "get",
              url: "/api/userExamEntry?examEntryId=" + row.examEntryId,
            }),
          ])
          .then(
            axios.spread(function (userResponse, userEntryReponse) {
              that.allUser = userResponse.data.data;
              that.allReg = userEntryReponse.data.data;
              //显示报名人姓名
              that.allReg.forEach((item) => {
                for (var i = 0; i < that.allUser.length; i++) {
                  if (item.userId == that.allUser[i].userId) {
                    that.$set(item, "email", that.allUser[i].email);
                    var _that = that;
                    axios({
                      headers: { Authorization: that.print.Authorization },
                      method: "get",
                      url: "/api/userInfo?username=" + that.allUser[i].userName,
                    }).then(function (reponse) {
                      _that.$set(item, "realName", reponse.data.data.realName);
                      _that.$set(item, "major", reponse.data.data.major);
                      _that.$set(item, "stuNo", reponse.data.data.stuNo);
                      _that.$set(
                        item,
                        "className",
                        reponse.data.data.className
                      );
                    });
                    i = that.allUser.length;
                  }
                }
              });
            })
          );
      } else {
        //redis获得报名用户信息
        axios
          .all([
            axios({
              headers: {
                Authorization: this.print.Authorization,
              },
              method: "get",
              url: "/api/users?pageNum&pageSize=1000000",
            }),
            axios({
              headers: { Authorization: this.print.Authorization },
              method: "get",
              url: "/api/userExamEntry/cache?examEntryId=" + row.examEntryId,
            }),
          ])
          .then(
            axios.spread(function (userResponse, userEntryReponse) {
              that.allUser = userResponse.data.data;
              that.allReg = userEntryReponse.data.data;
              //显示报名人姓名
              that.allReg.forEach((item) => {
                for (var i = 0; i < that.allUser.length; i++) {
                  if (item.userId == that.allUser[i].userId) {
                    that.$set(item, "email", that.allUser[i].email);
                    var _that = that;
                    axios({
                      headers: { Authorization: that.print.Authorization },
                      method: "get",
                      url: "/api/userInfo?username=" + that.allUser[i].userName,
                    }).then(function (reponse) {
                      _that.$set(item, "realName", reponse.data.data.realName);
                      _that.$set(item, "major", reponse.data.data.major);
                      _that.$set(item, "stuNo", reponse.data.data.stuNo);
                      _that.$set(
                        item,
                        "className",
                        reponse.data.data.className
                      );
                    });
                    i = that.allUser.length;
                  }
                }
              });
            })
          );
      }
      this.examLoading = false;

      axios({
        headers: { Authorization: this.print.Authorization },
        method: "get",
        url: "/api/examLocation/examDetail",
        params: {
          examDetailId: this.examDetailId,
        },
      }).then(function (reponse) {
        that.locationList = reponse.data.data;
        that.allReg.forEach((item) => {
          for (var i = 0; i < that.locationList.length; i++) {
            if (item.userId == that.locationList[i].userId) {
              that.$set(item, "location", that.locationList[i].location);
              i = that.locationList.length;
            }
          }
        });
      });
    },

    //删除报名信息记录，包含考场
    deleteUserReg: function (row) {
      var that = this;
      axios
        .all([
          axios({
            headers: { Authorization: this.print.Authorization },
            method: "delete",
            url: "/api/userExamEntry",
            params: {
              examEntryId: row.examEntryId,
              userId: row.userId,
            },
          }),
          axios({
            headers: { Authorization: this.print.Authorization },
            method: "delete",
            url: "/api/examLocation/user",
            params: {
              userId: row.userId,
            },
          }),
        ])
        .then(
          axios.spread(function (delRegResponse, delLocResponse) {
            that.$message({
              message: "删除信息成功",
              type: "success",
            });
            that.reload();
          })
        );
    },

    arrangeSeat: function () {
      var that = this;
      if (this.teacher != "")
        this.allReg.forEach(function (item, index) {
          var _that = that;
          setTimeout(function () {
            axios({
              headers: { Authorization: _that.print.Authorization },
              method: "post",
              url: "/api/examLocation",
              params: {
                examDetailId: _that.examDetailId,
                location: index + 1,
                userId: item.userId,
                teacher: _that.teacher,
                userExamEntryId: item.userExamEntryId,
              },
            }).then(
              function (reponse) {
                _that.reload();
              },
              function (err) {
                _that.$message.error("安排考场失败");
              }
            );
          }, 5000);
        });
      else
        this.$message({
          message: "教师姓名未输入",
          type: "warning",
        });
    },
  },
};
</script>